<template>
  <div class="login">
    <div @keyup.13="handleLogin" class="mainLogin">
      <!-- 磨砂背景 -->
      <div class="frosted-bg"></div>
      <div class="login-container">
        <!--头部-->
        <div class="form-title-wrap">
          <div class="logo"></div>
          <div class="form-title">{{$t("systemName")}}</div>
          <div class="form-subtitle">{{$t("subName")}}</div>
          <div class="form-english">BackStage login</div>
        </div>
        <!--表单-->
        <div class="form-content">
          <el-form :model="formData" :rules="formRules" ref="formData" label-position="left" label-width="0px" class="rule-form">
            <el-form-item prop="account">
              <el-input type="text" v-model="formData.account" icon="" auto-complete="off" :placeholder="$t('user.account')">
                <template slot="prepend">
                  <i class="fa fa-user-o"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="formData.password" auto-complete="off" :placeholder="$t('user.password')">
                <template slot="prepend">
                  <i class="fa fa-key"></i>
                </template>
              </el-input>
            </el-form-item>
          </el-form>

          <div class="remember">
            <el-checkbox v-model="isRemember"><label>{{ $t("user.rememberPassword") }}</label></el-checkbox>
          </div>
          <div class="buttons">
            <el-button type="primary" class="login" @click.native.prevent="handleLogin" :loading="loading.loginLoading">{{ $t("user.signIn") }}</el-button>
            <!--<el-button @click.native.prevent="handleReset2">{{ $t("reset") }}</el-button>-->
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>

/*#region 导入函数*/
import {UserAPI} from "../../../modules/xtp";
import PagePlugIn from "../../../mixins/page-plug-in";

/*#endregion*/

export default {
  name: "Login",
  methods: {

    /*#region 自定义函数(组件change事件等)*/
    redirect() {
      let redirect = this.$route.query.redirect;
      redirect = redirect ? redirect : "/";
      this.$router.push({ path: window.SYSTEM_CONFIG&&window.SYSTEM_CONFIG.homePage&&window.SYSTEM_CONFIG.homePage.path || redirect });
    },
    saveItem(data) {
      if (this.isRemember) {
        localStorage.setItem(window.TOKEN_KEY, data);
      } else {
        sessionStorage.setItem(window.TOKEN_KEY, data);
      }
    },

    /*#endregion*/

    /*#region 数据提交事件*/

    /*#endregion*/

    /*#region 操作函数(handle)*/
    handleLogin() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.loading.loginLoading = true;
          const loginParams = { account: this.formData.account, password: this.formData.password };
          UserAPI.loginUser(loginParams).then(async ({res}) => {
            sessionStorage.clear();
            localStorage.clear();
            this.loading.loginLoading = false;
            const { msg, code, data } = res.data;
            if (code !== 1) {
              this.$message({
                message: this.$t("user.loginFailed"),
                type: "error"
              });
            } else {
              await this.$store.dispatch("getMenuList", {params: {locale: this.$i18n.locale, module: "PC"}, Vue: this}).then(() => {
                this.$store.dispatch("getMenuOperation");
              });
              await this.saveItem(data);
              await this.getUserData();
              await this.$store.dispatch("delMenuList", []);
              await this.$store.dispatch("delMenuOperation", []);
              await this.$store.dispatch("delAllViews", []);
              // this.$store.dispatch('getMenuList',{params: {locale: this.$i18n.locale}},true)
            }
          });
        } else {
          return false;
        }
      });
    },

    /*#endregion*/

    /*#region 获取数据*/
    getUserData () {
      UserAPI.getUser().then(({res}) => {
        if (res.data.code === 1) {
          localStorage.setItem("account", res.data.data.account);
          localStorage.setItem("userName", res.data.data.name);
          sessionStorage.setItem("account", res.data.data.account);
          sessionStorage.setItem("userName", res.data.data.name);
          this.redirect();
        } else {
          this.$message({
            type: "error",
            message: this.$t("user.failedInformation")
          });
          return true;
        }
      });
    }

     /*#endregion*/

  },

  /*#region 生命周期函数(created、mount、等)*/
  created() {
    this.$message.closeAll();
  },

  /*#endregion*/

  /*#region 注册绑定数据*/

  data() {
    return {
      systemName: this.$t("systemName") || "",
      subName: this.$t("subName") || "",
      loading: {loginLoading: false},
      formData: {
        account: "",
        password: ""
      },
      formRules: {
        account: [
          { required: true, message: this.$t("user.accountMessage"), trigger: "blur" }
        ],
        password: [
          { required: true, message: this.$t("user.passwordMessage"), trigger: "blur" }
        ]
      },
      isRemember: false
    };
  },
  mixins: [PagePlugIn]

  /*#endregion */

}
</script>
<style scoped lang="scss">
  @import "../../../assets/styles/scss/views/base/login/login.scss";
</style>
